<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }
        
        div {
            border: 1px solid #ccc;
            margin: 100px auto;
            display: none;
        }
        
        div ul {
            width: 100%;
            height: 100%;
        }
        
        div ul li:nth-child(1) {
            width: 100%;
            height: 30px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
        }
        
        div ul li:nth-child(2) {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        div ul li:nth-child(2) span {
            padding: 6px 6px;
            border: 1px solid #ccc;
            margin: 50px 10px;
        }
        
        .btn {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <span></span>
                <h3>弹出框</h3>
                <span class='del'>X</span>
            </li>
            <li><span class="sp1"></span><span class="sp2"></span></li>
        </ul>
    </div>
    <button class="btn">按钮</button>
    <script>
        class Dialog {
            constructor(el, obj) {
                this.el = document.querySelector(el);
                this.obj = obj;
                this.sp1 = document.querySelector('.sp1')
                this.sp2 = document.querySelector('.sp2')
                this.del = document.querySelector('.del')
                this.init()
                this.gong()
            }
            init() {
                this.sp1.innerHTML = this.obj.content[0]
                this.sp2.innerHTML = this.obj.content[1]
            }
            gong() {
                let btn = document.querySelector('.btn')
                let flag = true;
                btn.onclick = () => {
                    this.el.style.width = this.obj.width
                    this.el.style.height = this.obj.height
                    if (flag) {
                        this.el.style.display = 'block'
                        flag = false;
                    } else {
                        location.href = './class.html'
                        flag = true;
                    }
                }
                this.sp1.onclick = () => {
                    let flag = confirm(this.obj.title)
                    if (flag) {
                        this.sp1.parentNode.parentNode.parentNode.parentNode.removeChild(this.sp1.parentNode.parentNode.parentNode)
                    }
                }
                this.sp2.onclick = () => {
                    this.sp1.parentNode.parentNode.parentNode.parentNode.removeChild(this.sp1.parentNode.parentNode.parentNode)
                }
                this.del.onclick = () => {
                    this.sp1.parentNode.parentNode.parentNode.parentNode.removeChild(this.sp1.parentNode.parentNode.parentNode)
                }
            }

        }
        let dialog = new Dialog('.box', {
            title: '确定要删除吗',
            width: '400px',
            height: '200px',
            content: ['确定', '取消'],
            sureCallback() {

            },
            closeCallback() {

            }

        })
    </script>
</body>